<template>
	<view class="order-content">
		<view>
			<u-toast ref="uToast"></u-toast>
			<u-toast ref="uToast2"></u-toast>
			<view>
				<u--input
				  class="order-input"
				  placeholder="请输入客户抖音订单号"
				  border="surround"
				  clearable
				  inputAlign="center "
				  v-model="tid"
				></u--input>
			</view>	
			
			<u-button type="primary"  text="查询进入" @click="findOrder"></u-button>
			
			
		</view>
	</view>
</template>

<script>
	import { getNoStateOrder } from '../../api/order';
	export default {
		data() {
			return {
				tid:""
			}
		},
		methods: {
			findOrder(){
				if(this.tid===""){
					this.showToast(
					{
						message:"订单号不能为空",
						type: "error",
						position:"top"
					}
					);
					return;
				}
				this.showToast(
				{
					loading:"true",
					type: "loading",
					position:"top",
					message:"正在加载",
					duration:30000,
					complete:() =>{
						this.$refs.uToast2.show({
						  message:"服务器繁忙，请重试",
						  type: "warning",
						  position:"top"
						});
					}
				}
				)
				// 发送请求查找是否有该订单
				getNoStateOrder(this.tid).then(res => {
					if(res.length>0){
						this.showToast(
						{
							message:"",
							type: "success",
							position:"top",
							duration:1000
						}
						);
						uni.navigateTo({
							url:'/pages/sale/order/index?tid='+this.tid
						})
					}else{
						this.showToast(
						{
							message:"未找到该订单",
							type: "warning",
							position:"top"
						}
						);
					}
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
				  ...params
				});
			  },
		}
	}
</script>

<style lang="scss">
	
.order-content{
	background-image: url('/static/order_bg.jpg');
	width:100vw;
	height:100vh; 
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	display:flex;
	align-items: center;
	justify-content: center;
	.order-input{
		background-color: white;
		height: 150rpx;
		width: 700rpx;
	}
}
* {
	margin: 0;
	padding: 0;
}

</style>
